<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" v-if="searchItem">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="编号" prop="seriesNo">
        <el-input v-model="queryParams.seriesNo" placeholder="请输入编号" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="queryParams.address" placeholder="请输入地址" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="地址" prop="addressDetail">
        <el-input v-model="queryParams.addressDetail" placeholder="请输入地址详情" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @clear="getDataList">
          <el-option label="正常" value="1"></el-option>
          <el-option label="维修中" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="editBtn">
        <el-button type="success" :disabled="single" plain icon="el-icon-edit" size="mini" @click="addOrUpdateHandle()" v-hasPermi="['smartCabinet:smartCabinet:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5" v-if="delectBtn">
        <el-button type="danger" :disabled="multiple" plain icon="el-icon-delete" size="mini" @click="deleteHandle" v-hasPermi="['smartCabinet:smartCabinet:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5" v-if="mapShowBtn">
        <el-button type="primary" icon="el-icon-s-promotion" size="mini" @click="mapHandle">地图分布</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :border="listBorder" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" v-if="type == 'indexList'"/>
      <el-table-column label="ID" width="160" align="center" prop="id" />
      <el-table-column label="编号" width="160" align="center" prop="seriesNo" />
      <el-table-column label="名称" width="160" align="center" prop="name" />
      <el-table-column width="160" label="所在城市" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.regionVo ?  scope.row.regionVo.area.mergename : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column width="160" label="所在区域" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.regionVo ?  scope.row.regionVo.details : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" width="260" align="center" prop="address" />
      <el-table-column width="160" label="状态" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 1 ?  '正常' : '维修中'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" align="center" prop="createtime" />
      <el-table-column label="更新时间" width="160" align="center" prop="updatetime" />
      <el-table-column fixed="right" width="260" label="操作" align="center" class-name="small-padding fixed-width" v-if="type == 'indexList'">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)" v-hasPermi="['smartCabinet:smartCabinet:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)" v-hasPermi="['smartCabinet:smartCabinet:remove']">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150" v-if="chooseTable">
        <template slot-scope="scope">
          <el-button size="small" @click="toggleSelectHandle(scope.row)" :style="actionStyle(scope.row)">
            {{actionText(scope.row)}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 弹窗, 地图分布 -->
    <map-distribution v-if="mapshow" :dataList="dataList" ref="mapDistribution"></map-distribution>

  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './shuweiCabinet/index-add-or-update'  //新增修改的状态弹窗
import MapDistribution from './shuweiCabinet/map-distribution'  //弹窗, 地图分布
import { saveShuiweiCabient } from "@/api/shuweiCabinet/shuweiCabinet";
export default {
  name: "ShuweiCabinet",
  mixins: [mixinViewModule],
  //  type                              使用列表的状态 indexList为后面有操作权限
  //  searchItem                        是否显示查询板块
  //  listBorder                        table是否展示边框
  //  chooseTable                       table是否可以选中
  //  editBtn                           是否显示修改按钮
  //  delectBtn                         是否显示删除按钮
  //  mapShowBtn                        是否显示地图分布按钮
  //  qPCabinetGroupNo                  queryParams传柜组编号cabinetGroupNo   
  //  qPNotInGroupNo                    queryParams传非柜组编号notInGroupNo
  //  regionId                          queryParams传区域id regionId 
  //  notInRegionId                     queryParams传非区域id notInRegionId 
  props: {
    type: {
      type: String,
      default: ''
    },
    searchItem: {
      type: Boolean,
      default: false
    },
    listBorder: {
      type: Boolean,
      default: false
    },
    chooseTable: {
      type: Boolean,
      default: false
    },
    editBtn: {
      type: Boolean,
      default: false
    },
    delectBtn: {
      type: Boolean,
      default: false
    },
    mapShowBtn: {
      type: Boolean,
      default: false
    },
    qPCabinetGroupNo: {
      type: String,
      default: ''
    },
    qPNotInGroupNo: {
      type: String,
      default: ''
    },
    regionId: {
      type: [String,Number],
      default: ''
    },
    notInRegionId: {
      type: [String,Number],
      default: ''
    },
  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/terminal/list',
        getDataListIsPage: true,
        deleteURL: '/terminal/remove',
        deleteIsBatch: true
      },
      // 查询参数
      queryParams: {
        name: '',
        seriesNo: '',
        address: '',
        addressDetail: '',
        status: '',
        cabinetGroupNo: this.qPCabinetGroupNo,
        notInGroupNo: this.qPNotInGroupNo,
        regionId: this.regionId,
        notInRegionId: this.notInRegionId,
      },
      mapshow: false, //地图分布弹窗的显示
      confirmLoading: false,
      value: [], //如果table可以选中，选中的值
    };
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
    MapDistribution, //弹窗, 地图分布
  },
  created() { },
  methods: {
    // 点击地图分布
    mapHandle() {
      this.mapshow = true
      this.$nextTick(() => {
        this.$refs.mapDistribution.init()
      })
    },
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.queryParams.seriesNo = row.seriesNo
        this.$refs.addOrUpdate.init()
      })
    },
    updateCabinet() {
      if (this.dataListSelections.length === 0) {
        this.$message('请选择需要更新的智能柜')
        return
      }
      let seriesNos = [];
      this.dataListSelections.map(item => {
        seriesNos.push(item.seriesNo)
      })
      updateCabinet(seriesNos).then(response => {
        this.$modal.msgSuccess("推送成功");
        this.maintenanceShow = false
        this.confirmLoading = false
        this.getDataList()
      }).catch(() => {
        this.confirmLoading = false
      })
    },
    actionStyle(row) {
      let color = "#666";
      if (this.value) {

        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              color = "#409EFF";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            color = "#409EFF";
          }
        }
      }
      return {
        color
      }
    },
    actionText(row) {
      let text = "未选择";

      if (this.value) {
        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              text = "已选择";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            text = "已选择";
          }
        }
      }
      return text
    },
    toggleSelectHandle(row) {
      if (this.value instanceof Array) {
        const index = this.value.findIndex((r) => r.id === row.id);
        if (index > -1) {
          this.value.splice(index, 1);
        } else {
          this.value.push({ ...row });
        }
      } else {
        if (row.id === this.value?.id) {
          this.value = {};
        } else {
          this.value = { ...row };
        }
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.table_status_text {
  display: flex;
  justify-content: center;
}
</style>